Pagination method

Description

Specify if pagination will be done using buttons for First, Previous, Next, and Last, a 'Fetch More' button willl appear in the List Data Footer, or 'AutoFetchMore' which is similar to 'Fetch More' except that no 'Fetch More' button is displayed. Instead, more records are automatically fetched as you scroll toward the end of the records that are currently loaded into the List.

images/method.png
The Pagination method property

The 'FetchMore' option places a button at the bottom of the 'page' that users click to display the next 'page' of records.

images/more.png
The 'FetchMore method

The 'AutoFetchMore' option automatically adds records to the list as soon as a user scrolls to the bottom of the 'page'.

images/more2.png
The AutoFetchMore method

The 'Navigation Buttons' option requires adding defined buttons to the list control; in addition to selecting the 'Pagination method'

images/more3.png
Navigation Buttons

Adding Navigation Buttons to a List Control

Adding Navigation buttons to a list control involves first checking the Navigation buttons property as the Pagination method and then actually adding the buttons to the control. This is done by clicking on the List-Navigation Buttons option under Defined Controls. For a walkthrough example watch this video or read its transcript here. Below is a simple example.

  1. Open the UX Builder and under the 'Data Controls' menu add a list control to the component.

    images/nav9.png
  2. Highlight the list control. In the control's properties list, scroll down to the List Properties section. Click the button next to the List properties control to open the List Builder.

    images/nav1.png
  3. On the Data Source tab specify the data source for your control. This example uses SQL as the Data Source type. The Connection string property has been set to the Northwind database and the Customers table has been selected as the 'Table name'. The 'Field list' includes the Adress, Country, City, and ContactName fields; and the Order and Primary key properties have been set to the ContactName field.

    images/nav8.png
  4. Scroll down the Data Source tab's properties list to the Data Pagination section. Check the Paginate data property. A number of additional pagination properties will appear.

    images/nav2.png
  5. Click on the dropdown button next to the Pagination method property and select 'Navigation Buttons'.

    images/nav3.png
  6. Go the 'List Layout' tab on the List Builder. Use the blue > arrow to move the available fields in your list into the Columns in List: box.

    images/nav10.png
  7. On the UX Controls page open the 'Defined Controls' menu. Find the 'List-Navigation Buttons' option and click on it.

    images/nav4.png
  8. A dialog will appear asking which list to apply the controls to. Choose the list that you just defined.

    images/nav5.png
  9. Another dialog will appear asking if you want to 'Navigate by page of records' or 'Navigate one record at a time'. Select one and click OK.

    images/nav6.png
  10. Now run in Live-Preview.

    images/nav7.png